<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影票预订系统 - {% block title %}{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #8e44ad;
            --primary-dark: #6c3483;
            --secondary: #3498db;
            --accent: #e74c3c;
            --light: #f8f9fa;
            --dark: #2c3e50;
            --gray: #7f8c8d;
            --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f1 100%);
            color: var(--dark);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background-attachment: fixed;
            background-size: cover;
            line-height: 1.6;
        }

        /* 导航栏样式 */
        .navbar {
            background: var(--gradient);
            box-shadow: var(--shadow);
            padding: 0.8rem 1rem;
            transition: var(--transition);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.8rem;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            transition: var(--transition);
        }

        .navbar-brand i {
            margin-right: 10px;
            font-size: 1.6rem;
        }

        .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 0.85) !important;
            font-weight: 500;
            padding: 0.5rem 1rem;
            margin: 0 0.2rem;
            border-radius: 50px;
            transition: var(--transition);
            position: relative;
        }

        .navbar-nav .nav-link:hover, 
        .navbar-nav .nav-link.active {
            color: white !important;
            background: rgba(255, 255, 255, 0.15);
        }

        .navbar-nav .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background: white;
            transition: var(--transition);
        }

        .navbar-nav .nav-link:hover::after {
            width: 60%;
        }

        .navbar-toggler {
            border: none;
            color: white;
        }

        /* 主内容区 */
        .main-container {
            flex: 1;
            padding: 2rem 0;
        }

        .container.my-4 {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 卡片样式 */
        .card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            margin-bottom: 1.5rem;
            background: rgba(255, 255, 255, 0.95);
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            background: var(--gradient);
            color: white;
            font-weight: 600;
            padding: 1.2rem 1.5rem;
            border: none;
        }

        .card-body {
            padding: 1.8rem;
        }

        /* 英雄区域 */
        .hero-section {
            background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.85)), url('https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1800&q=80') center/cover no-repeat;
            border-radius: 15px;
            color: white;
            padding: 4rem 2rem;
            margin-bottom: 2.5rem;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 700px;
        }

        .hero-title {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 1.2rem;
            text-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }

        .hero-subtitle {
            font-size: 1.4rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .btn-hero {
            background: var(--accent);
            border: none;
            border-radius: 50px;
            padding: 0.8rem 2.2rem;
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: var(--transition);
            color: white;
            box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
            display: inline-flex;
            align-items: center;
        }

        .btn-hero:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(231, 76, 60, 0.5);
            background: #c0392b;
        }

        .btn-hero i {
            margin-right: 8px;
        }

        /* 特性卡片 */
        .feature-card {
            text-align: center;
            padding: 2rem 1.5rem;
            border-radius: 15px;
            background: white;
            box-shadow: var(--shadow);
            transition: var(--transition);
            height: 100%;
            border-top: 4px solid var(--primary);
        }

        .feature-card:hover {
            transform: translateY(-10px);
        }

        .feature-icon {
            font-size: 3.5rem;
            color: var(--primary);
            margin-bottom: 1.5rem;
            transition: var(--transition);
        }

        .feature-card:hover .feature-icon {
            color: var(--secondary);
            transform: scale(1.1);
        }

        .feature-title {
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 1rem;
        }

        .feature-text {
            color: var(--gray);
        }

        /* 页脚样式 */
        footer {
            background: var(--dark);
            color: rgba(255, 255, 255, 0.8);
            padding: 4rem 0 2rem;
            margin-top: 3rem;
        }

        footer h5 {
            color: white;
            font-weight: 700;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.8rem;
        }

        footer h5::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--primary);
            border-radius: 3px;
        }

        footer ul li {
            margin-bottom: 0.8rem;
        }

        footer ul li a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: var(--transition);
        }

        footer ul li a:hover {
            color: white;
            padding-left: 5px;
        }

        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 1.5rem;
        }

        .social-icon {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 1.2rem;
            transition: var(--transition);
        }

        .social-icon:hover {
            background: var(--primary);
            transform: translateY(-5px);
        }

        .copyright {
            text-align: center;
            padding-top: 2rem;
            margin-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.6);
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-fade {
            animation: fadeIn 0.8s ease forwards;
        }

        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
        .delay-4 { animation-delay: 0.4s; }

        /* 响应式调整 */
        @media (max-width: 992px) {
            .hero-title {
                font-size: 2.5rem;
            }
            .hero-subtitle {
                font-size: 1.2rem;
            }
        }

        @media (max-width: 768px) {
            .navbar-brand {
                font-size: 1.5rem;
            }
            .hero-title {
                font-size: 2rem;
            }
            .hero-section {
                padding: 3rem 1.5rem;
            }
        }

        @media (max-width: 576px) {
            .hero-title {
                font-size: 1.8rem;
            }
            .hero-subtitle {
                font-size: 1.1rem;
            }
        }

        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-dark);
        }
    </style>
    {% block head %}{% endblock %}
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('home_bp.base') }}">
                <i class="bi bi-film"></i>电影票预订
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ url_for('home_bp.base') }}">首页</a> 
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('movie_list') }}">电影</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('cinema_list') }}">影院</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">优惠活动</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('seat') }}">在线选座</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    {% if current_user.is_authenticated %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle me-1"></i>{{ current_user.username }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="{{ url_for('profile') }}"><i class="bi bi-person me-2"></i>个人中心</a></li>
                            <li><a class="dropdown-item" href="{{ url_for('orders') }}"><i class="bi bi-ticket-perforated me-2"></i>我的订单</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}"><i class="bi bi-box-arrow-right me-2"></i>退出登录</a></li>
                        </ul>
                    </li>
                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('auth.login') }}">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link btn btn-outline-light rounded-pill px-3" href="{{ url_for('auth.register') }}">注册</a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="main-container">
        <div class="container my-4">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }} alert-dismissible fade show animate-fade" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            
            {% block content %}
            <div class="hero-section animate-fade">
                <div class="hero-content">
                    <h1 class="hero-title">探索无限电影世界</h1>
                    <p class="hero-subtitle">精选全球大片，轻松预订座位，享受影院级视听盛宴</p>
                    <a class="btn btn-hero" href="{{ url_for('seat') }}" role="button">
    <i class="bi bi-ticket-perforated"></i>立即购票
</a>
                </div>
            </div>
            
            <div class="row mb-5">
                <div class="col-md-4 mb-4 animate-fade delay-1">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="bi bi-film"></i>
                        </div>
                        <h3 class="feature-title">海量电影资源</h3>
                        <p class="feature-text">涵盖国内外最新大片，经典电影，满足各种观影需求，每日更新。</p>
                    </div>
                </div>
                
                <div class="col-md-4 mb-4 animate-fade delay-2">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="bi bi-geo-alt"></i>
                        </div>
                        <h3 class="feature-title">覆盖全国影院</h3>
                        <p class="feature-text">合作影院超过2000家，覆盖全国各大城市，选择离您最近的影院。</p>
                    </div>
                </div>
                
                <div class="col-md-4 mb-4 animate-fade delay-3">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="bi bi-ticket-perforated"></i>
                        </div>
                        <h3 class="feature-title">便捷购票体验</h3>
                        <p class="feature-text">在线选座，多种支付方式，电子票直接入场，无需排队取票。</p>
                    </div>
                </div>
            </div>
            
            <div class="card animate-fade delay-4">
                <div class="card-header">
                    <h2 class="mb-0"><i class="bi bi-fire me-2"></i>热门电影推荐</h2>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-4">
                            <div class="card h-100">
                                <img src="https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" class="card-img-top" alt="电影海报">
                                <div class="card-body">
                                    <h5 class="card-title">沙丘：第二部分</h5>
                                    <p class="card-text text-muted">科幻/冒险 | 166分钟</p>
                                    <div class="d-flex justify-content-between align-items-center mt-3">
                                        <span class="badge bg-primary">9.2分</span>
                                        <a href="#" class="btn btn-sm btn-outline-primary">选座购票</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-3 mb-4">
                            <div class="card h-100">
                                <img src="https://images.unsplash.com/photo-1542204165-65bf26472b9b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" class="card-img-top" alt="电影海报">
                                <div class="card-body">
                                    <h5 class="card-title">奥本海默</h5>
                                    <p class="card-text text-muted">剧情/传记 | 180分钟</p>
                                    <div class="d-flex justify-content-between align-items-center mt-3">
                                        <span class="badge bg-primary">9.0分</span>
                                        <a href="#" class="btn btn-sm btn-outline-primary">选座购票</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-3 mb-4">
                            <div class="card h-100">
                                <img src="https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" class="card-img-top" alt="电影海报">
                                <div class="card-body">
                                    <h5 class="card-title">哥斯拉大战金刚</h5>
                                    <p class="card-text text-muted">动作/科幻 | 113分钟</p>
                                    <div class="d-flex justify-content-between align-items-center mt-3">
                                        <span class="badge bg-primary">8.7分</span>
                                        <a href="#" class="btn btn-sm btn-outline-primary">选座购票</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-3 mb-4">
                            <div class="card h-100">
                                <img src="https://images.unsplash.com/photo-1535016120720-40c646be5580?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" class="card-img-top" alt="电影海报">
                                <div class="card-body">
                                    <h5 class="card-title">花月杀手</h5>
                                    <p class="card-text text-muted">剧情/犯罪 | 206分钟</p>
                                    <div class="d-flex justify-content-between align-items-center mt-3">
                                        <span class="badge bg-primary">8.9分</span>
                                        <a href="#" class="btn btn-sm btn-outline-primary">选座购票</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-center mt-4">
                        <a href="{{ url_for('movie_list') }}" class="btn btn-outline-primary">查看更多电影 <i class="bi bi-arrow-right"></i></a>
                    </div>
                </div>
            </div>
            {% endblock %}
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6 mb-4">
                    <h5>关于我们</h5>
                    <p>电影票预订系统提供最新的电影资讯、在线选座购票服务，让您享受便捷的观影体验。我们致力于为您带来最优质的观影服务。</p>
                    <div class="social-icons">
                        <a href="#" class="social-icon"><i class="bi bi-wechat"></i></a>
                        <a href="#" class="social-icon"><i class="bi bi-weibo"></i></a>
                        <a href="#" class="social-icon"><i class="bi bi-facebook"></i></a>
                        <a href="#" class="social-icon"><i class="bi bi-instagram"></i></a>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 mb-4">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="{{ url_for('home_bp.base') }}">首页</a></li>
                        <li><a href="{{ url_for('movie_list') }}">电影列表</a></li>
                        <li><a href="{{ url_for('cinema_list') }}">影院信息</a></li>
                        <li><a href="#">优惠活动</a></li>
                        <li><a href="#">会员中心</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <h5>帮助中心</h5>
                    <ul class="list-unstyled">
                        <li><a href="#">购票流程</a></li>
                        <li><a href="#">退改签政策</a></li>
                        <li><a href="#">会员服务</a></li>
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">联系客服</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <h5>联系我们</h5>
                    <ul class="list-unstyled">
                        <li><i class="bi bi-telephone me-2"></i> 400-123-4567</li>
                        <li><i class="bi bi-envelope me-2"></i> contact@movieticket.com</li>
                        <li><i class="bi bi-geo-alt me-2"></i> 北京市朝阳区电影大厦A座18层</li>
                        <li><i class="bi bi-clock me-2"></i> 服务时间: 9:00 - 23:00</li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; © 2025 电影票预订系统 | 畅享光影世界，体验非凡人生</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 初始化动画效果
        document.addEventListener('DOMContentLoaded', function() {
            // 滚动动画
            const animatedElements = document.querySelectorAll('.animate-fade');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = 1;
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, { threshold: 0.1 });
            
            animatedElements.forEach(el => {
                el.style.opacity = 0;
                el.style.transform = 'translateY(20px)';
                el.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
                observer.observe(el);
            });
            
            // 导航栏滚动效果
            window.addEventListener('scroll', function() {
                const navbar = document.querySelector('.navbar');
                if (window.scrollY > 50) {
                    navbar.style.padding = '0.5rem 1rem';
                    navbar.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.1)';
                } else {
                    navbar.style.padding = '0.8rem 1rem';
                    navbar.style.boxShadow = 'var(--shadow)';
                }
            });
        });
    </script>
    {% block scripts %}{% endblock %}
</body>
</html>